<template>
    <div class="article-manage-box" id="contentBox">
        <div class="content-title">
            <h1>图片上传</h1>
        </div>
        <div>
            <a-upload :file-list="fileList" :before-upload="beforeUpload" name="avatar" list-type="picture-card"
                class="avatar-uploader" :show-upload-list="false">
                <plus-outlined />
                <div style="margin-top: 8px">上传</div>
            </a-upload>
            <a-input v-model:value="imageUrl"></a-input>
        </div>
        <a-divider />
        <div class="content-title">
            <h1>所有文章</h1>
            <a-button type="primary" shape="round" size="20" @click="handleAddArticle">
                <template #icon>
                    <file-add-outlined />
                </template>
                新增文章
            </a-button>
        </div>
        <a-divider />
        <div v-for="item in list" :key="item.id" class="article">
            <a-card :hoverable="true" :title="item.title" :head-style='hstyle'>
                <template #extra><span class="date">{{ dateFormat(item.time) }}</span></template>
                <div class="article-content">
                    {{ item.summary }}
                </div>

                <template #actions>
                    <edit-outlined key="edit" @click="enterDetail(item.id)" />
                    <delete-outlined @click="handleDelete(item.id)" style="color:red;" />
                </template>
            </a-card>
        </div>
    </div>

</template>

<script lang="ts">
import { ref, reactive, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router"
import { EditOutlined, DeleteOutlined, FileAddOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { getArticles,deleteArticle } from "@/api/article"
import { message } from "ant-design-vue"
import { uploadImage } from "@/api/image"
export default {
    name: "Manage",
    components: {
        EditOutlined,
        DeleteOutlined,
        FileAddOutlined,
        PlusOutlined
    },
    setup() {
        const list: any = ref([])
        const loading = ref(true)
        const router = useRouter()
        const route = useRoute()

        function refresh(){
            getArticles({
                pageSize: 100,
                page: 0
            }).then(res => {
                res.data.forEach((item: any) => item.tags = item.tags.split(','))
                list.value = res.data
                console.log(list)
            })
        }

        onMounted(() => {
            refresh()
        })
        function dateFormat(str: string): string {
            return str.split(' ')[0].toString()
        }
        function enterDetail(id: number) {
            console.log(id, router)
            router.push({
                path: "/articleManage",
                query: {
                    id
                }
            })
        }
        function handleDelete(id: number) {
            deleteArticle({ id }).then((res: any) => {
                message.success(res.message)
                refresh()        
            })
        }

        const formData = new FormData();
        const fileList = ref<any>([])
        let imageUrl = ref("")
        const handleUpload = () => {
            uploadImage(formData).then((res) => {
                fileList.value.pop();
                formData.delete('file');
                message.success('上传成功');
                //TODO:逻辑改
                imageUrl.value = res.data.imgUrl
            }).catch(() => {
                message.error('上传失败');
            });
        };
        const beforeUpload: any = (file: any) => {
            fileList.value[0] = file
            formData.delete('file')
            formData.append('file', file as any);

            handleUpload()
            return false;
        };

        function handleAddArticle() {
            router.push('/articleManage')
        }

        return {
            list,
            loading,
            hstyle: {
                "font-size": "18px", "color": "#F0BEE6", "flex": "0", "font-weight": "bold", "text-align": "left"
            },
            dateFormat,
            enterDetail,
            handleDelete,
            beforeUpload,
            imageUrl,
            handleAddArticle
        }
    },
};
</script>

<style lang="less">
.article-manage-box {
    margin: 0px 25% 30px 10%;
    padding-top: 20px;

    .content-title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        font-size: large;
        font-weight: bold;
    }

    .article {
        margin: 10px 0;

        .date {
            color: rgba(150, 150, 150, .7);
        }

        .article-content {
            text-align: left;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .actions-tag {
            height: 40px;
            text-align: left;
            display: flex;
            align-items: center;
            padding: 0 20px;
        }

        .actions-btn {
            text-align: right;
            padding: 0 20px;
        }
    }
}
</style>